<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center newCustomer_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub newCustomer_fd0_0'>
          <view class='flex flex-wrap align-center newCustomer_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  newCustomer_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='newCustomer_fd0_0_c1_c0'>{{aid? '编辑' : '新建'}}客户</text>
          </view>
          <view class='flex flex-wrap align-center justify-end newCustomer_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout newCustomer_flex_1">
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text class='newCustomer_fd1_0_c0_c0'>*</text>
            <text>客户姓名</text>
          </view>
          <benben-input class='newCustomer_fd1_0_c1' type="text" :placeholder="`请输入客户姓名`" confirm-type="done"
            :maxlength="-1" :adjust-position='true' v-model="customer_name"
            placeholder-style="color:#999;font-size:28rpx" />
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text class='newCustomer_fd1_0_c0_c0'>*</text>
            <text>联系电话</text>
          </view>
          <benben-input class='newCustomer_fd1_0_c1' v-model="customer_phone" type="text" :placeholder="`请输入联系电话`"
            confirm-type="done" :maxlength="30" :adjust-position='true'
            placeholder-style="color:#999;font-size:28rpx" />
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0' @click.stop="chooseType">
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <!-- <text class='newCustomer_fd1_0_c0_c0'>*</text> -->
            <text>客户类型</text>
          </view>
          <view class="newCustomer_fd1_0_c1" :class="customer_typesname ? '' : 'avtive'">
            {{customer_typesname || '请选择客户类型'}}
          </view>
        </view>
        <!-- <view class='flex flex-wrap align-stretch justify-end newCustomer_fd1_0'>
          <benben-select-diy ref="showSelectPopup171921136002911" class-name='flex flex' v-model="customer_types"
            :items.sync="custormerList" default-type="value" default-label="name" :allow-cancel='true' type="radio"
            :disabled='false'>
            <template v-for='(item,key0) in custormerList'>
              <view v-if="item.isSelected" class='flex align-center flex newCustomer_fd1_3_c0_c0s' :key="key0"
                @tap="$refs.showSelectPopup171921136002911.tapHandle(key0)">
                <image class='newCustomer_fd1_3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"157.png"'></image>
                <text class='newCustomer_fd1_3_c0_c0_c1'>{{item.name}}</text>
              </view>
              <view v-else class='flex align-center flex newCustomer_fd1_3_c0_c0s' :key="key0"
                @tap="$refs.showSelectPopup171921136002911.tapHandle(key0)">
                <image class='newCustomer_fd1_3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"158.png"'></image>
                <text class='newCustomer_fd1_3_c0_c0_c1'>{{item.name}}</text>
              </view>
            </template>
          </benben-select-diy>
        </view> -->
        <!-- <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text class='newCustomer_fd1_0_c0_c0'>*</text>
            <text>类型</text>
          </view>
          <benben-input class='newCustomer_fd1_0_c1' type="text" :placeholder="`请选择`" confirm-type="done"
            :maxlength="-1" :adjust-position='true' :disabled='true' placeholder-style="color:#999;font-size:28rpx" />
        </view> -->
        <view class='flex flex-wrap align-stretch justify-end newCustomer_fd1_0'>
          <benben-select-diy ref="showSelectPopup1719211360029" class-name='flex flex' v-model="customer_type"
            :items.sync="cateList" default-type="value" default-label="name" :allow-cancel='false' type="radio"
            :disabled='false'>
            <template v-for='(item,key0) in cateList'>
              <view v-if="item.isSelected" class='flex align-center flex newCustomer_fd1_3_c0_c0' :key="key0"
                @tap="$refs.showSelectPopup1719211360029.tapHandle(key0)">
                <image class='newCustomer_fd1_3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"157.png"'></image>
                <text class='newCustomer_fd1_3_c0_c0_c1'>{{item.name}}</text>
              </view>
              <view v-else class='flex align-center flex newCustomer_fd1_3_c0_c0' :key="key0"
                @tap="$refs.showSelectPopup1719211360029.tapHandle(key0)">
                <image class='newCustomer_fd1_3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"158.png"'></image>
                <text class='newCustomer_fd1_3_c0_c0_c1'>{{item.name}}</text>
              </view>
            </template>
          </benben-select-diy>
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'
          @tap.stop="pickerDiy1719212019101=true">
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text class='newCustomer_fd1_0_c0_c0'>*</text>
            <text>日期</text>
          </view>
          <view class="newCustomer_fd1_0_c1" :class="date_time ? '' : 'avtive'">{{date_time || '请选择日期'}}</view>
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'
          @tap.stop="pickerDiy1719211556324=true">
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text>来源</text>
          </view>
          <view class="newCustomer_fd1_0_c1" :class="sourceName ? '' : 'avtive'">{{sourceName || '请选择来源'}}</view>
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text>婚礼酒店</text>
          </view>
          <benben-input class='newCustomer_fd1_0_c1' type="text" :placeholder="`请输入婚礼酒店`" confirm-type="done"
            :maxlength="-1" :adjust-position='true' v-model="wedding_hotel"
            placeholder-style="color:#999;font-size:28rpx" />
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_0'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text>对比商家</text>
          </view>
          <benben-input v-model="comparison_merchant" class='newCustomer_fd1_0_c1' type="text" :placeholder="`请输入对比商家`"
            confirm-type="done" :maxlength="-1" :adjust-position='true'
            placeholder-style="color:#999;font-size:28rpx" />
        </view>
        <view class='flex flex-wrap align-stretch justify-between newCustomer_fd1_8'>
          <text>是否成交</text>
          <view class='flex flex-wrap align-center'>
            <benben-select-diy ref="showSelectPopup17192113600293" class-name='flex flex' v-model="conclude_status"
              :items.sync="isSuss" default-type="value" default-label="name" :allow-cancel='false' type="radio"
              :disabled='false'>
              <template v-for='(item,key0) in isSuss'>
                <view v-if="item.isSelected" class='flex align-center flex newCustomer_fd1_3_c0_c0' :key="key0"
                  @tap="$refs.showSelectPopup17192113600293.tapHandle(key0)">
                  <image class='newCustomer_fd1_3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"157.png"'></image>
                  <text class='newCustomer_fd1_3_c0_c0_c1'>{{item.name}}</text>
                </view>
                <view v-else class='flex align-center flex newCustomer_fd1_3_c0_c0' :key="key0"
                  @tap="$refs.showSelectPopup17192113600293.tapHandle(key0)">
                  <image class='newCustomer_fd1_3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"158.png"'></image>
                  <text class='newCustomer_fd1_3_c0_c0_c1'>{{item.name}}</text>
                </view>
              </template>
            </benben-select-diy>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_9'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text>五大金刚</text>
          </view>
        </view>
        <view class='flex flex-wrap newCustomer_fd1_10'>
          <benben-textarea autoHeight class='flex newCustomer_input_fd1_10' :placeholder="'请输入五大金刚'"
            :adjust-position='true' :maxlength="-1" :show-num='true' placeholder-style="color:#999;font-size:28rpx"
            v-model="five_kong" />
          <!-- <template>
            <view class='flex flex justify-end newCustomer_numberfd1_10_c0'>
              <text>{{five_kong.length}}</text>
              <text>/</text>
              <text>240</text>
            </view>
          </template> -->
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_9'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text>客户分析</text>
          </view>
        </view>
        <view class='flex flex-wrap newCustomer_fd1_10'>
          <benben-textarea autoHeight class='flex newCustomer_input_fd1_10' :placeholder="'请输入客户分析'"
            :adjust-position='true' :maxlength="-1" :show-num='true' placeholder-style="color:#999;font-size:28rpx"
            v-model="customer_analysis" />
          <!-- <template>
            <view class='flex flex justify-end newCustomer_numberfd1_10_c0'>
              <text>{{customer_analysis.length}}</text>
              <text>/</text>
              <text>240</text>
            </view>
          </template> -->
        </view>
        <view class='flex flex-wrap align-center justify-between newCustomer_fd1_9'>
          <view class='flex flex-wrap align-center newCustomer_fd1_0_c0'>
            <text>改进方法</text>
          </view>
        </view>
        <view class='flex flex-wrap newCustomer_fd1_10'>
          <benben-textarea autoHeight class='flex newCustomer_input_fd1_10' :placeholder="'请输入改进方法'"
            :adjust-position='true' :maxlength="-1" :show-num='true' placeholder-style="color:#999;font-size:28rpx"
            v-model="improvement_method" />
          <!-- <template>
            <view class='flex flex justify-end newCustomer_numberfd1_10_c0'>
              <text>{{improvement_method.length}}</text>
              <text>/</text>
              <text>240</text>
            </view>
          </template> -->
        </view>
        <button class='newCustomer_fd1_15' @click="submit">确定</button>
      </view>

      <!---flex布局flex布局结束-->
      <!--选择器开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719212095973" mode='selector'
        :mask-show='true' :timeout='true' :picker-height='88' default-type='value'
        :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between newCustomer_picker2_0'>
            <text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text>标题</text>
            <text class='newCustomer_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择器结束 -->
      <!--时间选择开始 -->
      <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1719212019101" :value.sync='date_time'
        mode='date' :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true'
        start-year='1970-1-1' end-year='2050-12-31'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between newCustomer_picker3_0'>
            <text @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
            <text>选择日期</text>
            <text class='newCustomer_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--时间选择结束 -->
      <!--来源选择开始 -->
      <benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1719211556324" :label.sync='sourceName'
        :value.sync='source' :options='list' mode='selector' :mask-show='true' :timeout='true' :picker-height='88'
        default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between newCustomer_picker4_0'>
            <text @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
            <text></text>
            <text class='newCustomer_picker4_0_c2' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--来源选择结束 -->
      <!--客户类型 -->
      <benben-picker ref="benbenWritePickerCodepicker5" :visible.sync="pickerDiy1719211556324s"
        :label.sync='customer_typesname' :value.sync='customer_types' :options='custormerList' mode='selector'
        :mask-show='true' :timeout='true' :picker-height='88' default-type='value'
        :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between newCustomer_picker4_0'>
            <text @tap="$refs.benbenWritePickerCodepicker5.cancel()">取消</text>
            <text></text>
            <text class='newCustomer_picker4_0_c2' @tap="$refs.benbenWritePickerCodepicker5.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--客户类型 -->

    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "pickerDiy1719211556324": false,
        "pickerDiy1719212019101": false,
        "pickerDiy1719212095973": false,
        pickerDiy1719211556324s: false,
        "typeId": "",
        "typeName": "",
        "typeList": [],

        "id": "",
        cateList: [{
          value: '1',
          name: '婚礼'
        }, {
          value: '2',
          name: '活动'
        }],
        "customer_type": "1",
        custormerList: [{
          value: '1',
          name: '意向客户'
        }, {
          value: '2',
          name: '成交客户'
        }, {
          value: '3',
          name: '跟进中客户'
        }, {
          value: '4',
          name: '未成交客户'
        }],
        "customer_types": "",
        customer_typesname: '',
        isSuss: [{
          value: '1',
          name: '是'
        }, {
          value: '0',
          name: '否'
        }],
        customer_name: '',
        customer_phone: '',
        "date_time": "",
        source: '',
        sourceName: '',
        wedding_hotel: '',
        customer_analysis: '',
        comparison_merchant: '', //对比商家
        five_kong: '', //五大金刚
        conclude_status: '0', //是否已成交
        improvement_method: '', //改进方法
        list: []
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
      if (aid) {
        this.getDetail()
      }
      this.getList()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      chooseType() {
        if (this.conclude_status == 1) {
          return
        }
        this.pickerDiy1719211556324s = true
      },
      getDetail() {
        this.$api.post(global.apiUrls.post666ceed1b0826, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.customer_name = res.data.data.customer_name
            this.customer_phone = res.data.data.customer_phone
            this.customer_type = res.data.data.customer_type
            this.date_time = res.data.data.date_time
            this.sourceName = res.data.data.source_name
            this.source = res.data.data.source
            this.wedding_hotel = res.data.data.wedding_hotel
            this.customer_analysis = res.data.data.customer_analysis
            this.five_kong = res.data.data.five_kong
            this.improvement_method = res.data.data.improvement_method
            this.conclude_status = res.data.data.conclude_status
            this.comparison_merchant = res.data.data.comparison_merchant
            this.customer_types = res.data.data.customer_types
            this.customer_typesname = res.data.data.customer_types_name
          }
        })
      },
      getList() {
        this.$api.post(global.apiUrls.post668603b53c235).then(res => {
          if (res.data.code == 1) {
            this.list = res.data.data.list
          }
        })
      },
      submit() {
        if (!validate(this.customer_name, 'require')) {
          this.$message.info('客户姓名不能为空');
          return false;
        }
        if (!validate(this.customer_phone, 'require')) {
          this.$message.info('客户电话不能为空');
          return false;
        }
        // if (!validate(this.customer_phone, 'phone')) {
        //   this.$message.info('请输入正确的手机号');
        //   return false;
        // }
        if (!validate(this.date_time, 'require')) {
          this.$message.info('请选择日期');
          return false;
        }
        this.$api.dbPost(global.apiUrls.post666cedd70e57c, {
          aid: this.aid,
          customer_name: this.customer_name,
          customer_phone: this.customer_phone, //客户电话
          customer_type: this.customer_type, //类型
          date_time: this.date_time, //日期
          source: this.source, //来源
          wedding_hotel: this.wedding_hotel, //婚礼酒店
          customer_analysis: this.customer_analysis, //客户分析
          five_kong: this.five_kong, //五大金刚
          improvement_method: this.improvement_method, //改进方法
          conclude_status: this.conclude_status, //是否已成交
          comparison_merchant: this.comparison_merchant, //对比商家
          customer_types: this.customer_types
        }).then(res => {
          if (res.data.code == 1) {
            uni.navigateBack()
          } else {
            this.$message.info(res.data.msg)
          }
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .newCustomer_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .newCustomer_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .newCustomer_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .newCustomer_fd0_0_c0 {
    width: 120rpx;
  }

  .newCustomer_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .newCustomer_flex_1 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .newCustomer_fd1_15 {
    background: #F9E4C3;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    width: 686rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor0);
    height: 88rpx;
    margin: 32rpx auto 60rpx auto;
  }

  .newCustomer_numberfd1_10_c0 {
    width: 100%;
    font-size: 24rpx;
    color: var(--benbenFontColor0);
    line-height: 46rpx;
    font-weight: 400;
  }

  .newCustomer_input_fd1_10 {
    width: 100%;
    min-height: 140rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(211, 152, 80, 1);
    white-space: pre-wrap;
  }

  .newCustomer_fd1_10 {
    background: #F8F8F8;
    border-radius: 8rpx;
    padding: 16rpx;
    margin: 0rpx auto 0rpx auto;
    width: 686rpx;
    color: rgba(211, 152, 80, 1);
  }

  .newCustomer_fd1_9 {
    width: 702rpx;
    line-height: 100rpx;
    height: 100rpx;
    margin: 0rpx auto 0rpx auto;
  }

  .newCustomer_fd1_8 {
    border-bottom: 1px solid #eee;
    line-height: 100rpx;
    height: 100rpx;
    margin: 0rpx auto 0rpx auto;
    width: 702rpx;
  }

  .newCustomer_fd1_3_c0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .newCustomer_fd1_3_c0_c0_c0 {
    width: 36rpx;
    height: 36rpx;
  }

  .newCustomer_fd1_3_c0_c0 {
    margin: 0rpx 0rpx 0rpx 46rpx;
  }

  .newCustomer_fd1_3_c0_c0s {
    margin: 0rpx 0rpx 0rpx 4rpx;
  }

  .newCustomer_fd1_0_c1 {
    text-align: right;
    color: rgba(211, 152, 80, 1);

    &.avtive {
      color: #999999;
    }
  }

  .newCustomer_fd1_0_c0_c0 {
    color: var(--benbenFontColor5);
  }

  .newCustomer_fd1_0_c0 {
    height: 100rpx;
    line-height: 100rpx;
  }

  .newCustomer_fd1_0 {
    border-bottom: 1px solid #eee;
    width: 702rpx;
    line-height: 100rpx;
    height: 100rpx;
    margin: 0rpx auto 0rpx auto;
  }

  .newCustomer_picker2_0_c2 {
    color: #4781f5;
  }

  .newCustomer_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .newCustomer_picker3_0_c2 {
    color: rgba(211, 152, 80, 1);
  }

  .newCustomer_picker3_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .newCustomer_picker4_0_c2 {
    color: rgba(211, 152, 80, 1);
  }

  .newCustomer_picker4_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }
</style>
